<script lang="ts" setup>
import UserInfoForm from '@/components/form/UserInfoForm.vue'
import {
  queryUserInfoDetailOrderRequestData,
  bikeShortTermDetailOrderTableCol,
  queryUserInfoDetailOrderTableCol
} from '@/api/user/types/user'
import { queryUserInfoDetailOrder } from '@/api/user'
import { getToken } from '@/utils/cache/cookies'
import { useTable } from '@/hooks/useTable'
import GoButton from '@/components/basic/GoButton.vue'
import TimeRentOrderTable from '@/components/table/TimeRentOrderTable.vue'
import { useRoute, useRouter } from 'vue-router'
import { reactive, onActivated, defineAsyncComponent, ref } from 'vue'
const route = useRoute()
const router = useRouter()
const handleFormSearch = () => {
  if (form.phone !== route.query.phone) {
    router.push({
      name: 'TimeRentOrder',
      query: {
        phone: form.phone,
        orderId: form.orderId,
        type: form.type,
        selectType: 'bikeShortTerm'
      }
    })
    return
  }
  setCurrentPage(1)
  load()
}

const form = reactive<queryUserInfoDetailOrderRequestData>({
  phone: route.query.phone as string,
  orderId: route.query.orderId as string,
  type: '',
  selectType: 'bikeShortTerm'
})
const { pagination, handleSizeChange, handleCurrentChange, data, loading, setCurrentPage, load } =
  useTable<queryUserInfoDetailOrderTableCol>(queryUserInfoDetailOrder, getToken() ?? '', () => form)
defineExpose({ load })
onActivated(() => {
  form.phone = route.query.phone as string
  form.orderId = route.query.orderId as string
})
const AdjustBikeFeeDialog = defineAsyncComponent(
  () => import('@/components/dialog/AdjustBikeFee.vue')
)
const AdjustBikeFeeDialogRef = ref<InstanceType<typeof AdjustBikeFeeDialog> | null>(null)
const handleOpenAdjustFee = (orderId: string, userId: string) => {
  AdjustBikeFeeDialogRef.value?.setId(orderId, userId)
  AdjustBikeFeeDialogRef.value?.open()
}
/**短租收/退费 */
const ShortBikeFeeChargedDialog = defineAsyncComponent(
  () => import('@/components/dialog/ShortBikeFeeCharged.vue')
)
const ShortBikeFeeChargedDialogRef = ref<InstanceType<typeof ShortBikeFeeChargedDialog> | null>(
  null
)
const handleOpenOperate = (row: bikeShortTermDetailOrderTableCol) => {
  ShortBikeFeeChargedDialogRef.value?.setId(row.orderId, row.phone, row.startTime, row.endTime)
  ShortBikeFeeChargedDialogRef.value?.open()
}
/** 费用调整记录 */
const toFeeRecord = () => {
  console.log(route.query)

  router.push({
    name: 'AdjustRecordList',
    query: {
      userId: route.query.userId,
      activeName: 'fee'
    }
  })
}
</script>

<template>
  <div flex justify-between items-center>
    <user-info-form v-model="form" type="timerent" @search="handleFormSearch" />
    <go-button icon-name="record" @click="toFeeRecord">
      <template #text>
        <span>费用调整记录</span>
      </template>
    </go-button>
  </div>
  <time-rent-order-table
    :loading="loading"
    @open-adjust="handleOpenAdjustFee"
    @open-operate="handleOpenOperate"
    :data="data as bikeShortTermDetailOrderTableCol[]"
  />
  <div flex justify-end mt-20>
    <el-pagination
      @current-change="handleCurrentChange"
      @size-change="handleSizeChange"
      v-model:current-page="pagination.pageNum"
      v-model:page-size="pagination.pageSize"
      background
      :total="pagination.total"
      layout="total,prev,pager,next,jumper,sizes"
    />
  </div>
  <adjust-bike-fee-dialog @refresh="load" ref="AdjustBikeFeeDialogRef" />
  <short-bike-fee-charged-dialog ref="ShortBikeFeeChargedDialogRef" @refresh="load" />
</template>

<style scoped></style>
